@import "brackets_variables.less";
@import "brackets_core_ui_variables.less";

/* ---- Phoenix Pro gradient title ----
 Light default: use the "light" gradient so it pops on light bg.
 Dark override: switch to the "dark" gradient for richer contrast. */
.phoenix-pro-title {
  background: @phoenix-pro-gradient-light;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;

  .dark & {
    background: @phoenix-pro-gradient-dark;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.phoenix-pro-title-plain {
  color: @phoenixPro-brand-light;

  .dark & {
    color: @phoenixPro-brand-dark;
  }
}

/* Dialog styles with light default + .dark overrides */
.browser-login-waiting-dialog, .pro-upgrade-dialog{
  /* ---- Layout ---- */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* ---- Cards ---- */
  .feature-card {
    background: @bc-panel-bg-alt;           // light surface
    border: 1px solid @bc-panel-border;     // subtle light border
    border-radius: @bc-border-radius-large; // 5px
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background 0.15s ease, border-color 0.15s ease;

    .dark & {
      background: @dark-bc-panel-bg-alt;    // #313131
      border: 1px solid @dark-bc-highlight; // rgba(255,255,255,0.06)
      border-radius: @dark-bc-border-radius-large;
    }
  }

  .feature-card:hover {
    background: @bc-panel-bg;               // hover lift
    border-color: @bc-shadow-small;         // rgba(0,0,0,0.06)

    .dark & {
      background: @dark-bc-panel-bg;        // #2c2c2c
      border-color: @dark-bc-panel-bg-hover;// rgba(255,255,255,0.12)
    }
  }

  .feature-card:focus-within {
    outline: 2px solid @bc-btn-border-focused;       // #2893ef (light)
    outline-offset: 2px;

    .dark & {
      outline: 2px solid @dark-bc-btn-border-focused;// #2893ef (dark var)
    }
  }

  /* ---- Media thumb ---- */
  .feature-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: @bc-bg-inline-widget;       // #e6e9e9

    .dark & {
      background: @dark-bc-bg-inline-widget;// #1b1b1b
    }
  }

  /* ---- Card body ---- */
  .feature-body {
    padding: 12px;
  }

  .feature-body h2 {
    margin: 0 0 6px;
    font-size: 15px;
    color: @bc-text-emphasized;             // #111

    .dark & {
      color: @dark-bc-text-alt;             // #fff
    }
  }

  .feature-body p {
    margin: 0;
    font-size: 13px;
    color: @bc-text-medium;                 // #606060
    line-height: 1.35;

    .dark & {
      color: @dark-bc-text-quiet;           // #9a9a9a
    }
  }

  /* ---- Header title ---- */
  .modal-header .dialog-title {
    color: @bc-text-emphasized;             // #111 on light

    .dark & {
      color: @dark-bc-text-alt;             // #fff on dark
    }
  }

  /* ---- Body copy ---- */
  .waiting-content-container > p {
    margin-bottom: 20px;
    font-size: 14px;
    color: @bc-text-medium;                 // #606060

    .dark & {
      color: @dark-bc-text-medium;          // #ccc
    }
  }

  /* ---- Links ---- */
  a {
    color: @bc-text-link;                   // #0083e8
    text-decoration: none;

    .dark & {
      color: @dark-bc-text-link;            // #6bbeff
    }
  }

  a:hover {
    text-decoration: underline;
  }
}

.pro-ended-dialog.modal {
  display: flex;
  flex-direction: column;
  width: 640px;
  height: 640px;              /* overall modal height */
}

.pro-ended-dialog .modal-header,
.pro-ended-dialog .modal-footer {
  flex: 0 0 auto;            /* don’t stretch */
}

.pro-ended-dialog .modal-body {
  flex: 1 1 auto;            /* take all leftover space */
  min-height: 0;             /* allow shrinking properly */
  max-height: 100%;             /* allow shrinking properly */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: none;
}

.pro-ended-dialog .promo-iframe-wrap {
  flex: 1 1 auto;
  min-height: 0;             /* important inside flex */
  display: flex;
}

.pro-ended-dialog .promo-iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- License Management Dialog ---- */
.license-management-dialog {
  /* ---- Layout ---- */
  .license-activation-section {
    margin-bottom: 24px;
  }

  .license-status-section {
    margin-top: 24px;
  }

  /* ---- Form Elements ---- */
  .license-form-group {
    margin-bottom: 16px;
  }

  .license-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 16px;
    color: @bc-text-emphasized;

    .dark & {
      color: @dark-bc-text-alt;
    }
  }

  .license-form-input {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    margin: 0;
  }

  /* ---- Activation Button ---- */
  .license-activate-btn {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: @bc-border-radius;
    transition: background-color 0.15s ease, border-color 0.15s ease;

    .btn-spinner {
      display: none;
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  /* ---- Section Divider ---- */
  .license-divider {
    margin: 24px 0;
    border: none;
    border-top: 1px solid @bc-panel-border;

    .dark & {
      border-top-color: @dark-bc-panel-separator;
    }
  }

  /* ---- Section Headers ---- */
  .license-section-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 500;
    color: @bc-text-emphasized;

    .dark & {
      color: @dark-bc-text-alt;
    }
  }

  /* ---- Status States ---- */
  .license-status-loading,
  .license-status-none,
  .license-status-error {
    text-align: center;
    padding: 20px;
  }

  .license-status-loading {
    color: @bc-text-medium;

    .dark & {
      color: @dark-bc-text-medium;
    }

    .fa-spinner {
      margin-right: 8px;
      color: @bc-text-medium;

      .dark & {
        color: @dark-bc-text-medium;
      }
    }
  }

  .license-status-none {
    color: @bc-text-medium;

    .dark & {
      color: @dark-bc-text-medium;
    }

    .fa-exclamation-circle {
      margin-right: 8px;
      color: #ff9500;
      font-size: 18px;
    }
  }

  .license-status-error {
    color: @bc-error;

    .dark & {
      color: @dark-bc-error;
    }

    .fa-exclamation-triangle {
      margin-right: 8px;
      font-size: 18px;
    }
  }

  /* ---- Valid License Info Card ---- */
  .license-info-card {
    border: 1px solid @bc-panel-border;
    border-radius: @bc-border-radius-large;
    padding: 16px;
    background-color: @bc-panel-bg-alt;

    .dark & {
      border-color: @dark-bc-highlight;
      background-color: @dark-bc-panel-bg-alt;
    }
  }

  .license-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .license-info-label {
      color: @bc-text-medium;
      font-size: 14px;

      .dark & {
        color: @dark-bc-text-medium;
      }
    }

    .license-info-value {
      font-weight: 500;
      color: @bc-text-emphasized;
      font-size: 14px;

      .dark & {
        color: @dark-bc-text-alt;
      }
    }
  }

  /* ---- Status Badge ---- */
  .license-status-badge {
    padding: 4px 8px;
    background-color: #28a745;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }

  /* ---- Activation Messages ---- */
  .license-activation-message {
    margin-top: 16px;
    padding: 12px;
    border-radius: @bc-border-radius;
    font-size: 14px;
    display: none;

    &.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;

      .dark & {
        background-color: @dark-bc-success-bg;
        color: #4dff4d;
        border-color: #2d5a2d;
      }
    }

    &.error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;

      .dark & {
        background-color: fade(@dark-bc-error, 15%);
        color: @dark-bc-error;
        border-color: fade(@dark-bc-error, 30%);
      }
    }
  }

  /* ---- Dialog Header ---- */
  .modal-header .dialog-title {
    color: @bc-text-emphasized;

    .dark & {
      color: @dark-bc-text-alt;
    }
  }
}
